﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>keep-alive切换组件时缓存起来</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>keep-alive切换组件时缓存起来</h1><br/>

<div id="app">
    {{name}}<br/>

    <input type="radio" v-model="flag" value="component1">com1
    <input type="radio" v-model="flag" value="component2">com2
    <br />

    <!--加上vue内置标签keep-alive可以让组件缓存起来，不会频繁的创建销毁。可以做个实验，每个子组件里写上created和mounted和beforeDestory-->
    <!--为将来的路由做准备-->
    <keep-alive>
        <!--组件内容切换-->
        <component :is="flag"></component>
    </keep-alive>
</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    let component1 = {
        template: '<div>com1</div>'
    };
    let component2 = {
        template: '<div>com2</div>'
    }

    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据',
            flag:'component1'
        },
        components:{
            component1,component2
        }
    });
</script>

</body>
</html>